// webpack默认配置文件，当然也可以更改名称
// webpack --config 配置文件
// 模块化规范 commonjs
const path = require('path')
// webpack插件，帮助webpack打包生成时，创建一个index.html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 删除打包成的dist目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 静态资源复制
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  // 开启的模式，生产还是开发
  mode: 'development',
  // 开发工具配置 开发时配置 source-map 作用：代码出错了，可以帮我们定位到src目录中程序
  devtool: 'source-map',
  // 指定入口文件
  // 字符串
  entry: './src/app.js',
  // 对象 多入口 不多
  /* entry: {
    // key对应打包生成后的文件名称，可路径   value入口文件
    app: './src/app.js'
  }, */
  // 数组
  // 多文件合并 一般也不怎么用
  // entry: ['./src/app.js']
  // 出口
  output: {
    // 打包生成的文件路径 绝对地址
    path: path.resolve('dist'),
    // 打包生成后的主入口js文件
    // 变量 
    // [name]-> 如果你的entry为对象方式，则name为key值，其它情况都为main 
    // [hash]-> 根据文件信息生成一个21位hash值，一般不重复,支持截取[hash:8]
    // filename: '[name].[hash].js'
    filename: '[name].[hash:8].js'
    // filename: '[name].js'
  },
  // 打包是对于哪一些包，不进行打包
  externals: {
    // jquery: 'jQuery'
    // import中的导入的包名称，window对象中的名称
    jquery: '$'
  },
  resolve: {
    // 配置解析模块路径别名：优点简写路径，缺点路径没有提示
    alias: {
      // 定义一个@变量，可在import引入时使用
      '@': path.resolve('src'),
      '_c':path.resolve('src/components')
    },
    // 配置省略文件路径的后缀名称 import '@/index'
    // 如果省略，建议文件名称不要重名了
    extensions: ['.js', '.json', '.art', '.vue']
  },
  // 加载器
  module: {
    // 规则
    rules: [
      // 处理css
      {
        // 正则匹配loader解析文件扩展名
        test: /\.css$/i,
        // loader执行顺序
        // 执行顺序 写在一行：从右向左，写在多行：从下向上执行
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      // 处理scss
      {
        test: /\.scss$/,
        // 执行顺序   从右到边，从下到上  
        use: [
          "style-loader",
          "css-loader",
          "sass-loader"
        ]
      },
      // 图片处理
      {
        test: /\.(png|jpeg|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 图片小于8kb，就会被base64处理
              // 优点: 减少请求数量(减轻服务器压力)
              // 缺点：图片体积会更大(文件请求速度更慢)
              limit: 1 * 1024,
              // 打包后的路径和文件名称 [ext]扩展名
              name: 'images/[name].[ext]',
              // 打包后的文件指定访问路径前缀
              publicPath: '/'
            }
          }
        ]
      },
      // html中图片处理
      {
        test: /\.html$/,
        // 处理html中的img(负责引入img,从而能被url-loader进行处理)
        loader: ['html-loader']
      },
      // js兼容处理
      {
        test: /\.ajs$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 按需加载
                    useBuiltIns: 'usage',
                    // 指定core-js版本
                    corejs: 3,
                    // 兼容性做到哪个版本的浏览器
                    targets: {
                      ie: '8'
                    }
                  }
                ]
              ]
            }
          }
        ]
      },
      { test: /\.ts$/, loader: "ts-loader" },
      // 模板引擎解释
      {
        test: /\.vue$/,
        use: ["art-template-loader"]
      }
    ]
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 模板
      template: path.resolve('public/index.html')
    }),
    // 复制静态资源 -- 直接复制不做任何处理
    new CopyPlugin({
      patterns: [
        {
          // 来源
          from: path.resolve('public/favicon.ico'),
          // 目标
          to: path.resolve('dist/favicon.ico')
        },
        {
          from: path.resolve('src/assets/iconfont'),
          to: path.resolve('dist/iconfont'),
        }
      ]
    })

  ],
  // 开发环境服务配置  打包时，放在内存中， 不会在磁盘中生成一个dist目录
  devServer: {
    port: 3000,
    // 自动打开浏览器
    // open: true,
    // 显示编辑打包进度
    progress: true,
    // 安静模式,不显打包信息
    quiet: true,
    // 代理
    /* proxy: {
      '/api': {
        target: 'https://www.baidu.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    } */
  }

}
